<template>
    <div class="main">
        <div class="time clock">
            <div class="hour_wrap">
                <div class="hour_item" :style="{transform:'translate(-50%,-50%)'+'rotate('+30*(index+1)+'deg)'}" v-for="(item,index) in 12" :key="index">
                    {{index+1}}
                     <div class="ke" v-if="(index+1)%3==0"></div>
                </div>
            </div>
			<div class="marker">
			</div>
            <div class="hour_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+hourRotate+'deg)'}"></div>
            <div class="minute_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+minuteRotate+'deg)'}"></div>
            <div class="second_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+secondRotate+'deg)'}"></div>
        </div>
    </div>
</template>

<script setup>
	import {
		onBeforeUnmount,
		onMounted,
		ref
	} from 'vue';
	const interval = ref(0);
	const hourRotate = ref(0);
	const minuteRotate = ref(0);
	const secondRotate = ref(0);

	onMounted(() => {
		let now = null,
			hour = 0,
			minute = 0,
			second = 0;
		interval.value = setInterval(() => {
			now = new Date();
			hour = now.getHours();
			minute = now.getMinutes();
			second = now.getSeconds();
			hourRotate.value = 30 * (hour + Math.floor(minute / 60 * 100) / 100);
			minuteRotate.value = 6 * (minute + Math.floor(second / 60 * 100) / 100);
			secondRotate.value = 6 * second;
		}, 1000);
	})
	// beforeDestroy
	onBeforeUnmount(() => {
		clearInterval(interval.value);

	})
</script>

<style scoped>
.main {
  display: flex;
  justify-content: center;
  margin: 20rpx;
}
.time {
  width: 140px;
  height: 140px;
  border: 1px solid #ccc;
  position: relative;
  justify-self: center;
  box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
  border-radius: 50%;
}
.time .hour_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.time .hour_wrap .hour_item {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 12px;
  font-size: 12px;
  text-align: center;
  transform-origin: 6px 70px;
}
.time .hour_wrap .hour_item .ke {
  width: 1px;
  height: 8px;
  background-color: #ccc;
  margin: 0 auto;
}
.time .minute_wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.time .minute_wrap .minute_item {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 10px;
  font-size: 12px;
  text-align: center;
  transform-origin: 5px 70px;
}
.time .minute_wrap .minute_item .ke {
  width: 2px;
  height: 4px;
  background-color: #000;
  margin: 0 auto;
  margin-top: 10px;
}
.time .hour_hand {
  width: 3px;
  height: 30px;
  background-color: #5b0eeb;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 1.5px 30px;
}
.time .minute_hand {
  width: 2px;
  height: 50px;
  background-color: #6d5dfc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 1px 50px;
}
.time .second_hand {
  width: 1px;
  height: 60px;
  background-color: #6d5dfc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0.5px 60px;
}
.clock .marker {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff;
}
.clock .marker::after {
  content: "";
  width: 60%;
  height: 60%;
  position: absolute;
  box-shadow: inset 1px 1px 1px #c8d0e7, inset -1px -1px 1px #fff;
  border-radius: 50%;
  top: 20%;
  left: 20%;
  filter: blur(1px);
}

</style>